<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>
<style>
	.weui-btn{
		font-size: 15px;
	}
	.weui-cell{
		padding: 8px 10px;
	}
</style>
<body>

<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>我的预约</b></font></h1>
</header>

<div class="mui-content mui-slider">
	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" >
		<a class="mui-control-item " href="#hascheck">门店已确认</a>
		<a class="mui-control-item" href="#nocheck">待门店确认</a>
		<a class="mui-control-item" href="#cancelbook">已取消</a>
	</div>
	<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
	<div class="mui-slider-group" >
		<div id="hascheck"  class="mui-slider-item mui-control-content ">
			<div th:each="woServbook:${woServbook}" th:if="${woServbook.stat==1}">
				<div class="weui-cells weui-cell_access" style="margin-top: 0px">
					<div class="weui-cell">
						<div class="weui-cell__hd"><i class="fa fa-university fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;</div>
						<div class="weui-cell__bd">
							<h4 th:text="${woServbook.chnname}">广工西区分店</h4>
						</div>
						<p class="weui-cell__ft" th:text="${woServbook.statname}">待确定</p>
					</div>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a th:href="@{'/person/myservbookitem?bookseq='+${woServbook.bookseq}}">
							<div class="weui-flex" ><span style="font-size:16px">预约单号:&nbsp;&nbsp;<span class="booknum" style="color: grey" th:text="${woServbook.bookseq}"></span></span></div>
							<div class="weui-flex" ><span style="font-size:16px">预约内容:&nbsp;&nbsp;<span style="color: grey" th:text="${woServbook.servitemname+'...'}"></span></span></div>
							<div class="weui-flex" ><span style="font-size:16px">到店时间:&nbsp;&nbsp;<span style="color: grey" th:text="${woServbook.bookdate}+'  '+${woServbook.booktime}"></span></span></div>
							<div class="weui-flex" ><span style="font-size:16px">备注:&nbsp;&nbsp;<span style="color: grey" th:text="${woServbook.remark}"></span></span></div>
						</a>
					</li>
				</ul>
				<div class="weui-flex" >
					<div class="weui-flex__item" style="padding: 3px" th:if="${woServbook.stat!=-1}"><a class="weui-btn weui-btn_primary" onclick="cancelbook(this)">取消预约</a></div>
					<div class="weui-flex__item" style="padding: 3px;display: none" th:if="${woServbook.stat==-1}" ><a class="weui-btn weui-btn_primary"  onclick="cancelbook(this)">取消预约</a></div>
					<div class="weui-flex__item" style="padding: 3px"><a class="weui-btn weui-btn_primary" onclick="myservbookitem(this)">查看详情</a></div>
				</div>

				<div class="weui-cells__title" align="center"></div><!--间隔一下-->
			</div>
		</div>
		<div id="nocheck"  class="mui-slider-item mui-control-content ">
			<div th:each="woServbook:${woServbook}" th:if="${woServbook.stat==0}">
				<div class="weui-cells weui-cell_access" style="margin-top: 0px">
					<div class="weui-cell">
						<div class="weui-cell__hd"><i class="fa fa-university fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;</div>
						<div class="weui-cell__bd">
							<h4 th:text="${woServbook.chnname}">广工西区分店</h4>
						</div>
						<p class="weui-cell__ft" th:text="${woServbook.statname}">待确定</p>
					</div>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a th:href="@{'/person/myservbookitem?bookseq='+${woServbook.bookseq}}">
							<div class="weui-flex" ><span style="font-size:16px">预约单号:&nbsp;&nbsp;<span class="booknum" style="color: grey" th:text="${woServbook.bookseq}"></span></span></div>
							<div class="weui-flex" ><span style="font-size:16px">预约内容:&nbsp;&nbsp;<span style="color: grey" th:text="${woServbook.servitemname+'...'}"></span></span></div>
							<div class="weui-flex" ><span style="font-size:16px">到店时间:&nbsp;&nbsp;<span style="color: grey" th:text="${woServbook.bookdate}+'  '+${woServbook.booktime}"></span></span></div>
							<div class="weui-flex" ><span style="font-size:16px">备注:&nbsp;&nbsp;<span style="color: grey" th:text="${woServbook.remark}"></span></span></div>
						</a>
					</li>
				</ul>
				<div class="weui-flex" >
					<div class="weui-flex__item" style="padding: 3px" th:if="${woServbook.stat!=-1}"><a class="weui-btn weui-btn_primary" onclick="cancelbook(this)">取消预约</a></div>
					<div class="weui-flex__item" style="padding: 3px;display: none" th:if="${woServbook.stat==-1}" ><a class="weui-btn weui-btn_primary"  onclick="cancelbook(this)">取消预约</a></div>
					<div class="weui-flex__item" style="padding: 3px"><a class="weui-btn weui-btn_primary" onclick="myservbookitem(this)">查看详情</a></div>
				</div>

				<div class="weui-cells__title" align="center"></div><!--间隔一下-->
			</div>
		</div>
		<div id="cancelbook"  class="mui-slider-item mui-control-content ">
			<div th:each="woServbook:${woServbook}" th:if="${woServbook.stat==-1}">
				<div class="weui-cells weui-cell_access" style="margin-top: 0px">
					<div class="weui-cell">
						<div class="weui-cell__hd"><i class="fa fa-university fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;</div>
						<div class="weui-cell__bd">
							<h4 th:text="${woServbook.chnname}">广工西区分店</h4>
						</div>
						<p class="weui-cell__ft" th:text="${woServbook.statname}">待确定</p>
					</div>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a th:href="@{'/person/myservbookitem?bookseq='+${woServbook.bookseq}}">
							<div class="weui-flex" ><span style="font-size:16px">预约单号:&nbsp;&nbsp;<span class="booknum" style="color: grey" th:text="${woServbook.bookseq}"></span></span></div>
							<div class="weui-flex" ><span style="font-size:16px">预约内容:&nbsp;&nbsp;<span style="color: grey" th:text="${woServbook.servitemname+'...'}"></span></span></div>
							<div class="weui-flex" ><span style="font-size:16px">到店时间:&nbsp;&nbsp;<span style="color: grey" th:text="${woServbook.bookdate}+'  '+${woServbook.booktime}"></span></span></div>
							<div class="weui-flex" ><span style="font-size:16px">备注:&nbsp;&nbsp;<span style="color: grey" th:text="${woServbook.remark}"></span></span></div>
						</a>
					</li>
				</ul>
				<div class="weui-flex" >
					<div class="weui-flex__item" style="padding: 3px" th:if="${woServbook.stat!=-1}"><a class="weui-btn weui-btn_primary" onclick="cancelbook(this)">取消预约</a></div>
					<div class="weui-flex__item" style="padding: 3px;display: none" th:if="${woServbook.stat==-1}" ><a class="weui-btn weui-btn_primary"  onclick="cancelbook(this)">取消预约</a></div>
					<div class="weui-flex__item" style="padding: 3px"><a class="weui-btn weui-btn_primary" onclick="myservbookitem(this)">查看详情</a></div>
				</div>
				<div class="weui-cells__title" align="center"></div><!--间隔一下-->
			</div>
		</div>
	</div>


	<div class="weui-cells__title" align="center">没有再多内容啦</div><!--没有再多内容啦-->

</div>

</body>
<script>
	/*查看详情*/
function myservbookitem($this) {
    var bookseq=$($this).parent().parent().parent().find(".booknum").text();
	location.href="/person/myservbookitem?bookseq="+bookseq;
}
/*取消预约*/
function cancelbook($this) {
    var bookseq=$($this).parent().parent().parent().find(".booknum").text();
    $.confirm("您确定要取消预约吗?", function() {
        location.href="/person/cancelbook?bookseq="+bookseq;
    })

}
</script>
</html>
